<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
      xmlns:shiro="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>友和OA管理系统</title>
    <link th:replace="common/Head :: headCss">
    <link th:href="@{/bootstrap/dataTable/datatables.min.css}" rel="stylesheet">

    <style type="text/css">
        .table > tbody > tr > td {
            text-align: center;
        }

        /* dataTables表头居中 */
        .table > thead:first-child > tr:first-child > th {
            text-align: center;
        }

        .table > caption + thead > tr:first-child > td, .table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > td, .table > thead:first-child > tr:first-child > th {
            border-top: 0;
            border-bottom: 0;
        }

        .layui-form .layui-form-item label {
            width: 100px;
        }
    </style>
</head>

<body>
<div id="wrapper">
    <nav th:include="common/Left_Ment :: left"></nav>
    <div id="page-wrapper" class="gray-bg">
        <div th:include="common/Head :: head"></div>
        <div class="wrapper wrapper-content animated fadeInRight" id="wrapperView">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <!--<div class="ibox-title">
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                    <i class="fa fa-wrench"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-user">
                                    <li><a href="#">Config option 1</a>
                                    </li>
                                    <li><a href="#">Config option 2</a>
                                    </li>
                                </ul>
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>-->
                        <div class="ibox-content">
                            <div class="table-responsive" id="div-table-container">
                                <!-- <div class="grid-btn" style="float: left;">
                                     <button id="btnAdd" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon">&#xe608;</i>新建委托</button>
                                 </div>-->
                                <div class="grid-btn" style="float: left;">
                                    <button class="btn btn-primary" id="btnFile" style="margin-bottom:0"><i
                                            class="fa fa-arrow-circle-o-down"></i>&nbsp;上传
                                    </button>
                                </div>

                                <table id="myTable"
                                       class="table table-striped table-bordered table-hover dataTables-example"
                                       style="width: 100%">
                                    <thead>
                                    <tr>
                                        <th>
                                            <input type="checkbox" name="cb-check-all">
                                        </th>
                                        <th>公司制度文件</th>
                                        <th>类型</th>
                                        <th>编辑人</th>
                                        <th>上传时间</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tfoot>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-container" style="display: none; width: 300px" id="uploadFile">
            <div class="layui-upload" style="margin-top: 30px;">
                <div class="layui-row" style="text-align: center">
                    <div class="layui-col-md12">
                        <button type="button" class="layui-btn layui-btn-normal" id="files">请选择Excel,Word文件</button>
                    </div>
                </div>
                <br/>
                <div class="form-group" style="border-bottom: 1px solid #e5e6e7;">
                    <div class="layui-form-item" style="margin-left: 45px">
                        <span style="text-align: center">&nbsp;&nbsp;&nbsp;请自定义文件所属分类名称</span>
                        <br/> <br/>
                        <div class="layui-input-inline">
                            <input type="text" id="fileCategoryName" name="fileCategoryName" class="layui-input" >
                        </div>
                    </div>
                </div>
                <!--选择分类-->
              <div class="form-group" style="margin-left: 72px;">
                    <span style="margin-left: -10px">可以选择已有的分类名称</span>
                    <br/><br/>
                    <div class="form-group" style="margin-left: 52px">

                        <div class="layui-fluid">
                            <div class="layui-form" lay-filter="myForm"  style="padding: 20px 30px 0 0;">
                                <div class="layui-form-item">
                                    <div class="layui-input-inline" style="margin-left: -93px;margin-top: -20px">
                                        <select  id="typeName" name="typeName" lay-filter="attorneySel" class="layui-form-select" lay-verify="required" >
                                            <option value=''>请选择</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- <span class="glyphicon glyphicon-user" onclick="selUser(this)">

                         </span>-->
                    </div>
                </div>

                <div class="layui-row" style="margin-top: 30px;text-align: center;">
                    <div class="layui-col-md12">
                        <button type="button" class="layui-btn layui-btn-sm" id="upload">上传</button>
                    </div>
                </div>

            </div>
        </div>


        <div class="footer">
            <div>
                <strong>Copyright</strong> 星记云典 Company &copy; 2014-2017
            </div>
        </div>

    </div>
</div>

<div th:include="common/Head :: mainJs"></div>
<div th:include="common/Head :: navMenuJs"></div>
<script th:src="@{/bootstrap/dataTable/datatables.min.js}"></script>

<!-- Page-Level Scripts -->
<script type="text/javascript">

    layui.use(['element', 'form', 'laydate'], function () {
        yuheUtils.bindPersonalSetting();
        var $ = layui.jquery, element = layui.element, form = layui.form, laydate = layui.laydate;

        // 选中左侧菜单
        var $thisA = $('a[href="/docment/rule"]');
        $thisA.parent().attr("class", "active");
        $thisA.parent().parent().attr("class", "nav nav-second-level collapse in");

        var $wrapper = $('#div-table-container');
        var $table = $('#myTable');

        // datatables 初始化，这个已经整合服务端分页了
        var _table = $table.dataTable($.extend(true, {}, CONSTANT.DATA_TABLES.DEFAULT_OPTION, {
            ajax: function (data, callback, settings) { // ajax配置为function,手动调用异步查询
                //封装请求参数
                var param = getQueryCondition(data);
                $.ajax({
                    type: "GET",
                    url: "/docment/ruleList", // 表格数据接口
                    cache: false,  //禁用缓存
                    data: param,    // 传入已封装的参数
                    dataType: "json",
                    success: function (result) {
                        //异常判断与处理
                        if (result.Status !== 0) {
                            layer.msg('查询失败：' + result.msg, {icon: 2});
                            return;
                        }

                        //封装返回数据，这里仅演示了修改属性名
                        var returnData = {};
                        returnData.draw = data.draw;    //这里直接自行返回了draw计数器,应该由后台返回
                        returnData.recordsTotal = result.total;
                        returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果
                        returnData.data = result.data;

                        //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
                        //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                        callback(returnData);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        layer.msg('查询失败', {icon: 2});
                    }
                });
            },
            columns: [
                CONSTANT.DATA_TABLES.COLUMN.CHECKBOX,

                {
                    className: "ellipsis", //文字过长时用省略号显示，CSS实现
                    data: "fileName",
                    width: "100px"
                    /* render : CONSTANT.DATA_TABLES.RENDER.USER_NAME*/  //会显示省略号的列，需要用title属性实现划过时显示全部文本的效果
                },
                {
                    className: "ellipsis",
                    data: "fileCategoryName",
                    /* render : CONSTANT.DATA_TABLES.RENDER.USER_NAME,*/
                    //固定列宽，但至少留下一个活动列不要固定宽度，让表格自行调整。不要将所有列都指定列宽，否则页面伸缩时所有列都会随之按比例伸缩。
                    //切记设置table样式为table-layout:fixed; 否则列宽不会强制为指定宽度，也不会出现省略号。
                    width: "100px"
                },
                {
                    className: "ellipsis", //文字过长时用省略号显示，CSS实现
                    data: "uploadPeople",
                    width: "150px"
                },
                {
                    className: "ellipsis", //文字过长时用省略号显示，CSS实现
                    data: "uploadDate",
                    width: "150px"
                },
                {
                    className: "td-operation",
                    data: null,
                    defaultContent: "",
                    orderable: false,
                    width: "50px"
                },
                {
                    className: "ellipsis", //文字过长时用省略号显示，CSS实现
                    data: "id",
                    width: "50px",
                    visible: false
                    /* render : CONSTANT.DATA_TABLES.RENDER.USER_NAME*/  //会显示省略号的列，需要用title属性实现划过时显示全部文本的效果
                },
            ],
            "createdRow": function (row, data, index) {
                //行渲染回调,在这里可以对该行dom元素进行任何操作
                //给当前行加样式

                //给当前行某列加样式
                // $('td', row).eq(3).addClass(data.status?"text-success":"text-error");
                //不使用render，改用jquery文档操作呈现单元格
                /*var str=$('td', row).eq(5).text();
                str='0'?'未阅读':'已阅读'
                $('td', row).eq(5).html(str);*/
                var $btnCheck = $('<button type="button" row-event="delete" class="btn btn-primary btn-xs btn-outline" style="margin-bottom:0">删除</button>');
                var $btnCheck2 = $('<a href="/docment/downloadFile?id='+data.id+'" row-event="download" class="btn btn-primary btn-xs btn-outline" style="margin-bottom:0">下载</a>');

                $('td', row).eq(5).append($btnCheck).append('&nbsp;&nbsp;&nbsp;')
                $('td', row).eq(5).append($btnCheck2)

            },
            "drawCallback": function (settings) {
                //渲染完毕后的回调
                //清空全选状态
                $(":checkbox[name='cb-check-all']", $wrapper).prop('checked', false);
                //默认选中第一行
                $("tbody tr", $table).eq(0).click();
            }
        })).api();  //此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象

        // 上传框
        $('#btnFile').on('click', function () {
            /* $(".layui-upload-choose").html("")*/
            imporFile();
        });

        // 行按钮事件
        $table.on('click', 'button[row-event="delete"]', function () {
            var item = _table.row($(this).closest('tr')).data();
            $.get("/docment/deleteRuleOne?id=" + item.id, function (r) {
                if (r.Status === 0) {
                    layer.msg('删除成功', {icon: 1, time: 1000}, function () {
                        tableReload();
                    });
                }else{
                    layer.msg('删除失败', {icon: 2, time: 1000}, function () {
                    });
                }
            })
        });
        $table.on('click', 'button[row-event="download"]', function () {
            var item = _table.row($(this).closest('tr')).data();
            window.open("/docment/downloadFile?id=" + item.id);

        });


        var idx;
        layui.use('upload', function () {

            var $ = layui.jquery
                , upload = layui.upload;
            //选完文件后不自动上传
            upload.render({
                elem: '#files'
                , url: '/docment/uploadRule'
                , data: {
                    fileCategoryName: function () {
                        return $("#fileCategoryName").val()
                    }
                }
                , auto: false
                , accept: 'file'
                ,exts:'xlsx|doc|docx|xls|xlsm|xlt|xlb|xlc|xlk|xlm|xld|xll|xlv|xlthtml|xlshtml'
                , size: 10240
                , multiple: true
                , bindAction: '#upload'
                , done: function (r) {
                    console.log(r)
                    console.log(r.Status)
                    if (r.Status === 0) {
                        layer.msg('上传成功', {icon: 1, time: 1000}, function () {
                            layer.close(idx);
                            tableReload();
                        });
                    } else if (r.Status === 503) {
                        layer.msg('分类名称不能为空', {icon: 2, time: 1000}, function () {
                            layer.close(idx);
                        });

                    } else {
                        layer.msg('上传失败', {icon: 2, time: 1000});
                        layer.close(idx);
                    }
                }
            });

        });
        //监听下拉框事件
        form.on('select(attorneySel)', function(data){
            var str=$("#typeName").val();
            $("#fileCategoryName").val(str)
            form.render('select');
        });

        $("#fileCategoryName").keyup(function(){
            /* $("#typeName").html("<option value=''>请选择</option>")*/
            /* $("#typeName").find("option[text='请选择']").attr("selected",true);*/
            /* var srt=$("#typeName").find("option:selected").text()
               $("#typeName").find("option[text=srt]").html('请选择');*/
            /* $("#typeName").text('123');*/
            //$(this).attr("selected","selected")两者都可以选中


        })

        /*加载下拉框的值*/
        function imporFile() {
            initInformation()
            $.ajax({
                url : "/docment/categoryRuleList",
                type:"post",
                dataType : "json",
                success : function(data) {
                    var $attorneySel = $('select[name="typeName"]');
                    $.each(data, function (i,item) {
                        $attorneySel.append('<option value="' + item.fileCategoryName + '">' + item.fileCategoryName + '</option>');
                    });
                    form.render('select');
                }
            });
            layer.open({
                type: 1,
                title: '选择需要上传的文件',
                resize: true,
                fixed: true,
                shadeClose: true,
                shade: 0.1,
                scrollbar: false,
                area: ['450px', '450px'],
                content: $('#uploadFile'),
            });
        }
        /*初始化弹框信息*/
        function initInformation() {
            $(".layui-upload-choose").html('')
            $("#typeName").empty()
            $("#typeName").append("<option value=''>请选择</option>");
            $("#fileCategoryName").val('');
        }
        /**
         * 获取查询参数
         */
        function getQueryCondition(data) {
            var param = {};
            //组装排序参数
            /*if (data.order&&data.order.length&&data.order[0]) {
                switch (data.order[0].column) {
                }
                param.orderDir = data.order[0].dir;
            }*/
            //组装查询参数
            param.fullSearch = data.search.value;

            // 组装分页参数
            param.current = (data.start / 10) + 1;    // 计算页码
            param.size = data.length;

            return param;
        }

        // 刷新表格
        function tableReload() {
            _table.ajax.reload(function () {
                _table.columns.adjust().draw();

            }, false);
        }

        laydate.render({
            elem: '#startTime',
            type: 'datetime'
        });
        laydate.render({
            elem: '#endTime',
            type: 'datetime'
        });






        form.on('select(processSel)', function (obj) {
            var select_text = obj.elem[obj.elem.selectedIndex].text;
            $('input[name="processName"]').val(select_text)
        });

        /**
         * 监听表单提交
         */
        form.on('submit(form-submit)', function (obj) {
            var field = obj.field;
            console.log('field=', field);
            var st = (new Date(field.startTime)).getTime();
            var et = (new Date(field.endTime)).getTime();
            if (et - st <= 0) {
                return layer.msg('开始时间不能大于或等于结束时间', {icon: 2})
            }

            $.ajax({
                type: 'POST',
                url: '/activiti/delegate/save',
                data: field,
                async: false,
                success: function (r) {
                    console.log('save r=', r);
                    if (r.Status === 0) {
                        layer.msg('保存成功', {icon: 1});
                        tableReload();
                        layer.close(idx);
                    } else {
                        layer.msg(r.msg, {icon: 2});
                    }
                }
            });
            return false;
        });

    });


</script>

</body>

</html>
